<template>
	<view class="wallectDetail">
		<HeaderBar title="钱包详情" showBack backgroundColor="#F6F6F6" fixed />
		<view class="content">
			<view class="cion_cell">
				<view class="cion">
					<image :src="'/static/images/tokenicon/' +icon+'.png'" mode="" class="icon"></image>
				</view>
				<view class="info">
					<view class="name" v-if="addressInfo">
						{{addressInfo.name}}
						<!-- <image src="../../static/images/home/edit.png" mode="" class="icon" @tap="showNamePopup">
						</image> -->
					</view>
					<view class="address" v-if="addressInfo">
						{{$utils.formatAddress(addressInfo.address)}}
						<image src="../../static/images/home/addcopy.png" mode="" class="icon" @tap="copy"></image>
					</view>
				</view>
			</view>
			<view class="cell_grounp" v-if="addressInfo&&addressInfo.importMethod!=4">
				<view class="cell" @tap="showPopup(1)">
					<text>导出私钥</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view>
				<view class="cell" @tap="showPopup(2)" v-if="addressInfo.mnemonics">
					<text>导出助记词</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view>
				<!-- <view class="cell">
					<text>钱包同步</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view> -->
			</view>
			<!-- <view class="cell_grounp">
				<view class="cell">
					<view class="">
						<text>关联钱包</text>
						<view class="tap">
							管理关联的多签钱包
						</view>
					</view>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view>
				<view class="cell">
					<text>白名单</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view>
			</view> -->
			<view class="cell_grounp" v-if="addressInfo&&addressInfo.importMethod!=4">
				<!-- <view class="cell">
					<text>指纹支付</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view> -->
				<view class="cell" @tap="showNamePopup(1)">
					<text>修改钱包名称</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view>
				<view class="cell" @tap="setPass">
					<text>修改密码</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view>
				<view class="cell" @tap="showTilpPopup" v-if="addressInfo.passwordTilp">
					<text>密码提示</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view>
				<view class="cell" @tap="showNamePopup(2)">
					<text>修改密码提示</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view>
				<!-- <view class="cell" @tap="resetPass">
					<text>重置密码</text>
					<image src="/static/images/login/right.png" class="icon" mode="widthFix"></image>
				</view> -->
			</view>
		</view>
		<view class="btn" @tap="showPopup(3)">
			删除钱包
		</view>
		<PasswordPopup ref="passwordPopup" @close="close" @confirm="confirm" />
		<uni-popup ref="popup2" type="dialog" border-radius="20upx">
			<uni-popup-dialog mode="input" title="密码提示" :duration="2000" :showClose="false" :before-close="true"
				@close="closeTilpPopup" @confirm="closeTilpPopup">
				<template #default>
					<view class="uni-form-item uni-column">
						{{addressInfo.passwordTilp}}
					</view>
				</template>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "",
				password: "",
				passtilp: "",
			}
		},
		computed: {
			addressInfo() {
				return this.$store.getters.addressInfo
			},
			chainId() {
				return this.$store.getters.getChainId
			},
			choinInfo() {
				return this.$store.getters.choinInfo
			},
			icon() {
				let token = this.choinInfo && this.choinInfo.find(item => item.tokenaddress == this.$config.defaultAddress)
				return token && token.tokenaddress + token.chainType + token.chainId
			},
		},
		mounted() {},
		methods: {
			//修改名字和密码事件
			showNamePopup(type) {
				uni.navigateTo({
					url: `/pages/setInfo/setInfo?type=${type}`
				})
			},
			//显示密码提示
			showTilpPopup() {
				this.$refs.popup2.open()
			},
			showPopup(type) {
				this.type = type
				if (type == 1 || type == 2) {
					this.$refs.passwordPopup.open()
				}
				if (type == 3) {
					uni.showModal({
						title: '提示',
						content: '确认删除该地址？',
						success: (res) => {
							if (res.confirm) {
								if (this.addressInfo.importMethod == 4) {
									this.deleteWallet()
								} else {
									this.$refs.passwordPopup.open()
								}

							}
						}
					});
				}
			},
			//关闭密码提示
			closeTilpPopup() {
				this.$refs.popup2.close()
			},
			//关闭密码输入弹框
			close() {
				this.$refs.passwordPopup.close()
			},
			//错误提示
			error(tip) {
				uni.showToast({
					title: tip,
					position: "bottom",
					icon: "none",
					duration: 2000
				});
			},
			//复制
			copy() {
				uni.setClipboardData({
					data: this.addressInfo.address,
					success: function() {
						uni.showToast({
							title: '复制成功',
							position: "bottom",
							icon: "none",
							duration: 2000
						});
					}
				});
			},
			//密码输入确认事件
			confirm() {
				this.close()
				if (this.type == 1) {
					uni.navigateTo({
						url: '/pages/exprotPrivateKey/exprotPrivateKey'
					})
				} else if (this.type == 2) {
					uni.navigateTo({
						url: '/pages/exprotMnemonics/exprotMnemonics'
					})
				} else if (this.type == 3) {
					this.deleteWallet()
				}
			},
			//删除钱包
			deleteWallet() {
				const address = uni.getStorageSync('wallerAddress');
				const chainId = uni.getStorageSync('chainId');
				this.$store.dispatch('delWallet', {
						address,
						chainId
					})
					.then(res => {
						uni.$db.select('list', {
							from: 'choinList',
						}).then(res => {
							if (res.length > 0) {
								const firstAddressInfo = res.find(item => item.chainId == this.chainId);
								if (firstAddressInfo) {
									this.$store.commit('setAddress', firstAddressInfo.address);
									this.$store.commit('setChainId', firstAddressInfo.chainId);
									this.$updateWalletInfo()
								} else {
									this.$store.commit('setAddress', res[0].address);
									this.$store.commit('setChainId', res[0].chainId);
									this.$updateWalletInfo()
								}
							} else {
								this.$store.commit('setAddress', "");
								this.$store.commit('setChainId', "");
								this.$updateWalletInfo()
							}
							uni.switchTab({
								url: '/pages/index/index', // 这里的路径是 tabBar 页面在项目中的路径
								success() {},
								fail(err) {}
							});

						})
					})
			},
			//修改密码
			setPass() {
				uni.navigateTo({
					url: '/pages/setPassword/setPassword'
				})
			},
			//重置密码
			resetPass() {
				uni.navigateTo({
					url: '/pages/resetPassword/resetPassword'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wallectDetail {
		height: 100%;
		background: #F6F6F6;
		font-weight: 400;

		.uni-mt-5 {
			margin-top: 10px;
		}

		.content {
			padding-top: 40upx;

			.cion_cell {
				display: flex;
				align-items: center;
				background: #FFF;
				padding: 24upx 28upx;

				.cion {
					display: flex;

					.icon {
						width: 68upx;
						height: 68upx;
						border-radius: 50%;
					}
				}

				.info {
					margin-left: 12upx;

					.name {
						display: flex;
						align-items: center;
						color: #979797;
						font-size: 32upx;

						.icon {
							width: 30upx;
							height: 30upx;
							margin-left: 10upx;
						}
					}

					.address {
						display: flex;
						align-items: center;
						color: #000000;
						font-size: 28upx;

						.icon {
							width: 30upx;
							height: 30upx;
							margin-left: 10upx;
						}
					}
				}
			}

			.cell_grounp {
				margin: 20upx 0;
				background: #FFF;

				.cell {
					&:last-child {
						border-bottom: none;
					}

					padding: 0 20upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1upx solid #D8D8D8;
					height: 90upx;
					font-size: 28upx;
					color: #000;
					border-bottom: 1px solid #D8D8D8;

					.icon {
						width: 20upx;
						height: 20upx;
					}

					.tap {
						font-size: 20upx;
						color: #979797;
					}
				}
			}
		}

		.btn {
			margin: 100upx 64upx 50upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			color: #CD0000;
			background: #FFF;
			height: 78upx;
		}

		.uni-form-item {
			width: 100%;

			.input-wrapper {
				display: flex;
				height: 70upx;
				background: #FFFFFF;
				align-items: center;

				.uni-input {
					flex: 1;
				}

				.icon {
					width: 32upx;
					height: 32upx;
				}
			}
		}

		:deep(.uni-popup-dialog) {
			background-color: #F5F6F8;

			.uni-dialog-title {
				.uni-popup__info {
					color: #3D3D3D;

					.uni-dialog-title-text {
						font-size: 36upx;
						font-weight: 400;
					}

				}
			}

			.uni-dialog-button-group {
				border-top-color: #D8D8D8;
				border-top-width: 1upx;

				.uni-dialog-button-text {
					color: #368521;
				}

				.uni-border-left {
					border-left-color: #D8D8D8;
					border-left-width: 1upx;

					.uni-button-color {
						color: #D56B6F;
						// font-size: 28upx;
					}
				}
			}

		}
	}
</style>